<script lang="ts" setup>
import type { RowType } from '../../types';

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { useVbenModal } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getRoutesAppUrls } from '#/api/admin/routes';
import { postThemes } from '#/api/admin/theme';
import Icon from '#/components/Icons';

const gridOptions: VxeGridProps<RowType> = {
  rowConfig: { isCurrent: true, isHover: true },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'action', title: 'URL' },
    { field: 'name', title: 'URL名称' },
    { field: 'vars', title: '参数' },
    { field: 'suggest_url', title: '建议优化' },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        const { data } = await getRoutesAppUrls();
        data.list = Object.keys(data.list).map((key) => ({
          key,
          ...data.list[key],
        }));
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
});

const [Modal, modalApi] = useVbenModal();

const handleInstall = async (theme: string) => {
  await postThemes(theme);
  message.success('安装成功');
  modalApi.close();
};

const gridEvents: VxeGridListeners<RowType> = {
  currentChange({ row }) {
    modalApi.setData(row);
    modalApi.close();
  },
};
</script>
<template>
  <Modal :footer="false" class="w-3/5">
    <Grid :grid-events="gridEvents" table-title="规则列表">
      <template #action="{ row }">
        <Button type="primary" @click="handleInstall(row.theme)">
          <template #icon>
            <span class="anticon">
              <Icon icon="ri:install-line" />
            </span>
          </template>
          安装
        </Button>
      </template>
    </Grid>
  </Modal>
</template>
